<template>
  <view class="feed-wrapper flex flex-y">
    <view class="space-between align-center">
      <view class="flex-1 title">我投喂过的猫咪</view>
      <view
        class="flex feed-record"
        @click="toRecord"
      >
        投喂记录
        <u-icon
          name="arrow-right"
          size="24rpx"
          color="#afafaf"
        ></u-icon>
      </view>
    </view>
    <view
      v-if="isLogin && feedPet.donateFeedPetResDTOList.length > 0"
      class="feed-total"
    >
      累计投喂{{ feedPet.totalFeed || 0 }}g
    </view>
    <view
      v-if="feedPet.donateFeedPetResDTOList.length === 0 || !isLogin"
      class="no-cat"
    >
      您还没有爱心投喂记录哦~
    </view>
    <scroll-view
      v-if="
        feedPet.donateFeedPetResDTOList &&
        feedPet.donateFeedPetResDTOList.length > 0
      "
      :scroll-x="true"
      class="sv-cat-list"
    >
      <block
        v-for="item in feedPet.donateFeedPetResDTOList"
        :key="item.petId"
      >
        <view
          class="feed-cat-item flex flex-y"
          @click="toDetail(item)"
        >
          <u--image
            src="/static/mine/icon_cat_ear@2x.png"
            width="64rpx"
            height="8rpx"
            class="cat_ear"
          ></u--image>
          <view class="cat-wrap flex align-center">
            <u--image
              :src="item.petAvatar"
              width="64rpx"
              height="64rpx"
              radius="8rpx"
            ></u--image>
            <text class="cat-name">{{ item.petNickname }}</text>
          </view>
        </view>
      </block>
    </scroll-view>
    <maya-login-btn ref="loginBtn">
      <template #button></template>
    </maya-login-btn>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { userDonateUrl } from '@/const/webPageUrl.js';
import { navigateToWebView } from '@/utils/tools.js';
import { WEB_VIEW_TYPE } from '@/const/index.js';
import mayaLoginBtn from '@/components/maya-login-btn.vue';
export default {
  components: {
    mayaLoginBtn,
  },
  props: {
    feedPet: {
      type: Object,
      value: () => {},
    },
  },
  data() {
    return {
      WEB_VIEW_TYPE,
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${item.petId}`,
      });
    },
    toRecord() {
      if (!this.isLogin) {
        this.$refs.loginBtn.getMpUserInfo();
        return;
      }
      navigateToWebView({
        url: userDonateUrl,
        type: WEB_VIEW_TYPE.SHOP,
        title: '投喂记录',
      });
    },
  },
};
</script>

<style lang="scss">
.feed-wrapper {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-top: 24rpx;
  .title {
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
  }
  .feed-record {
    font-weight: 400;
    font-size: 24rpx;
    color: #afafaf;
    line-height: 24rpx;
  }
  .no-cat {
    height: 200rpx;
    text-align: center;
    padding-top: 100rpx;
    width: 100%;
    color: #666666;
    font-size: 24rpx;
  }
  .feed-total {
    font-weight: 400;
    font-size: 24rpx;
    margin-top: 12rpx;
    color: #333333;
  }
  .sv-cat-list {
    white-space: nowrap;
    width: 100%;
    .feed-cat-item {
      height: 84rpx;
      display: inline-flex;
      margin-right: 24rpx;
      .cat_ear {
        margin-left: 10rpx;
      }
      .cat-wrap {
        background-color: rgba(115, 234, 70, 0.3);
        border-radius: 6rpx;
        padding: 10rpx;
        .cat-name {
          font-weight: 500;
          font-size: 28rpx;
          color: #282828;
          margin-left: 12rpx;
        }
      }
    }
  }
}
</style>
